<template>
  <div class="interface-tag">
    <div v-for="(item,index) in tags" :key="index" class="interface-tag-item">
      <div v-if="typeof item == 'object'" class="f-14 flex-column align-items-center color-wirte">
        <div>{{item.name}}</div>
        <div>{{item.score}}/{{item.max}}</div>
      </div>
      <div v-else class="color-wirte f-14">
        {{item}}
      </div>
    </div>
  </div> 
</template>

<script setup>
import { ref, computed, defineProps } from 'vue'
defineProps({
  tags: {
    type: Array,
    default: () => []
  }
})
</script>

<style lang="scss" scoped>
.interface-tag{
  display: flex;
  flex-wrap: wrap;
  &-item {
    flex: 0 0 auto;
    min-width: 120px;
    max-width: 250px;
    background: #03cb84;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    margin-right: 12px;
    height: 60px;
    overflow: hidden;
    margin-bottom: 12px;
  }
}
</style>